<template>
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <div class="forget-pwd-container">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <h2>忘记密码</h2>
              <el-button type="text" @click="goToLogin" class="back-to-login">返回登录</el-button>
            </div>
          </template>
          <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input v-model="form.code" placeholder="请输入验证码">
                <template #append>
                  <el-button @click="sendCode" :disabled="isSending">{{ sendButtonText }}</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input type="password" v-model="form.newPassword" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input type="password" v-model="form.confirmPassword" placeholder="请再次输入新密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">重置密码</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>


<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

const form = reactive({
  email: '',
  code: '',
  newPassword: '',
  confirmPassword: ''
});

const rules = reactive({
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.newPassword) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      }, trigger: 'blur'
    }
  ]
});

const ruleForm = ref(null);
const isSending = ref(false);
const sendButtonText = ref('发送验证码');

import { userSendEmailService, userEmailUpdateService } from '@/api/user';
const sendCode = () => {
  isSending.value = true;
  sendButtonText.value = '发送中...';

  // 模拟发送验证码的API请求
  setTimeout(() => {
    isSending.value = false;
    sendButtonText.value = '重新发送';
  }, 3000);

  userSendEmailService(form.email).then(() => {
    ElMessage.success('验证码已发送');
  }).catch(() => {
    ElMessage.error('验证码发送失败');
  });
};

const submitForm = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      userEmailUpdateService(form)
        .then(() => {
          ElMessage.success('密码重置成功');
          router.push('/login');
        })
        .catch((error) => {
          console.error('密码重置失败:', error);
          ElMessage.error('密码重置失败，请稍后再试');
        });
    } else {
      ElMessage.error('两次密码不一致');
      return false;
    }
  });
};

const resetForm = () => {
  ruleForm.value.resetFields();
};

const goToLogin = () => {
  router.push('/login');
};
</script>


<style lang="scss" scoped>
/* 样式 */
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
      url('@/assets/login_bg.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    .title {
      margin: 0 auto;
    }

    .button {
      width: 100%;
    }

    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }

  .forget-pwd-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .box-card {
    width: 400px;
  }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
  }

  .logo {}

  .back-to-login {
    margin-left: auto;
  }
}
</style>
